<template>
  <div class="main">
    <div class="orderInfoMain">
      <div class="orderInfoBox">
        <div class="boxTitle">
          <h3>结算页</h3>
          <div class="steap">
            <el-steps
              :space="200"
              :active="2"
              finish-status="success"
              align-center
            >
              <el-step title="1.我的购物车" />
              <el-step title="2.填写核对订单信息" />
              <el-step title="3.成功提交订单" />
            </el-steps>
          </div>
        </div>
        <div class="tableTit">
          <span>填写并核对订单信息</span>
        </div>
        <div class="boxMain">
          <div class="reciveManInfo">
            <div class="topBox">
              <h3>收货人信息</h3>
              <el-link :underline="false" @click="addAddressBtn"
                >新增收货地址</el-link
              >
            </div>
            <div class="addressList">
              <div class="list-box" v-for="item in addressList" :key="item">
                <div class="namePron" @click="choseAddree(item)">
                  {{ item.name }}
                  <p class="duigou3" v-if="item.ischoseAddress">✓</p>
                </div>
                <div class="rightText">
                  <div class="contactName">{{ item.name }}</div>
                  <div class="clearAddress">
                    {{ item.address }}
                  </div>
                  <div class="phone">{{ item.phone }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="payType">
            <div class="topH">
              <h3>支付方式</h3>
            </div>
            <div class="payTypeList">
              <span @click="huodaoBtn" id="huodao"
                >货到付款
                <p class="duigou" v-if="huodao">✓</p></span
              >
              <span @click="zaixianBtn"
                >在线付款
                <p class="duigou" v-if="zaixian">✓</p></span
              >
            </div>
          </div>
          <div class="orderInfo">
            <div class="top">
              <h3>订单清单</h3>
            </div>
            <div v-for="item in orderDetailList" :key="item">
              <div class="orderInfoMainBox">
                <div class="orderBoxLeft">
                  <h3>配送方式</h3>
                  <div class="senTypeList">
                    <span
                      >极速快递
                      <p class="duigou2">✓</p></span
                    >
                  </div>
                  <div class="sendTime" v-show="activeIndex == 1">
                    <span>预计&nbsp;4月9日</span>
                    <span class="week">[周六]</span>
                    <span>送达</span>
                  </div>
                </div>
                <div class="orderBoxRight">
                  <div class="shopName">
                    <h3>商家:林泽屋家具商城</h3>
                  </div>
                  <div class="goodsBox">
                    <div class="imgbox">
                      <img :src="item.defaultImage" alt="" />
                    </div>
                    <div class="intrduce">
                      <div class="introdeceB">
                        <p>
                          {{ item.displayName }}
                        </p>
                      </div>
                      <div class="type">
                        <span>{{ item.skuName }}</span>
                      </div>
                      <div class="extra">
                        <span>支持30天无理由退货</span>
                      </div>
                    </div>
                    <div class="price">
                      <span>￥{{ item.price }}.00</span>
                    </div>
                    <div class="num">
                      <span>x{{ item.quantity }}</span>
                    </div>
                    <div class="isHaveNum">
                      <span>有货</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="discountBox">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="使用优惠券/礼品卡/折扣" name="1">
                <el-menu
                  :default-active="activeDiv"
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelect"
                >
                  <el-menu-item index="1" @click="activeDiv = 1"
                    >优惠券/礼品卡</el-menu-item
                  >
                  <el-menu-item index="2" @click="activeDiv = 2"
                    >折扣</el-menu-item
                  ></el-menu
                >
                <div class="card" v-show="activeDiv == 1">
                  <div
                    class="itemList"
                    v-for="item in orderDetailList"
                    :key="item"
                  >
                    <div class="tipBox">
                      <el-alert
                        title="本商品暂时不具有优惠券"
                        type="error"
                        center
                        show-icon
                        v-if="item.discountType !== 'coupon'"
                      />
                    </div>
                    <div
                      class="discountBox"
                      v-if="!(item.discountType !== 'coupon')"
                    >
                      <span>{{ item.skuName }}：&nbsp;</span>
                      <el-tag class="mx-1" closable type="success">
                        优惠券价值：{{ item.discountValue }}元
                      </el-tag>
                    </div>
                  </div>
                </div>
                <div class="card" v-show="activeDiv == 2">
                  <div
                    class="itemList"
                    v-for="item in orderDetailList"
                    :key="item"
                  >
                    <div class="tipBox">
                      <el-alert
                        title="本商品暂时不具有折扣"
                        type="error"
                        center
                        show-icon
                        v-if="item.discountType !== 'percentage'"
                      />
                    </div>
                    <div
                      class="discountBox"
                      v-if="!(item.discountType !== 'percentage')"
                    >
                      <span>{{ item.skuName }}：&nbsp;</span>
                      <el-tag class="mx-1" closable type="success">
                        折扣率：{{ (1 - item.discountValue) * 10 }}折
                      </el-tag>
                    </div>
                  </div>
                </div>
              </el-collapse-item></el-collapse
            >
          </div>
        </div>
        <div class="priceNum">
          <div class="priceTotle">
            <span>总商品金额:</span>
            <span class="right">￥{{ totleAmount }}.00</span>
          </div>
          <div class="priceTotle">
            <span>运费:</span>
            <span class="right">￥{{ freight }}.00</span>
          </div>
          <div class="priceTotle">
            <span>返现:</span>
            <span class="right">-￥{{ reductionAmount }}</span>
          </div>
        </div>
        <div class="footerPart">
          <div class="totalPrice">
            <span>应付总额:</span>
            <span class="PriceTo">￥{{ paymentAmount }}</span>
          </div>
          <div class="senAddressBox" v-if="sendAddressShow">
            <span>寄送至:&nbsp;&nbsp;&nbsp;</span>
            <span class="sendAddressSpan">{{ sendAddress.address }} </span>
            <span>收货人:&nbsp;&nbsp;&nbsp;</span>
            <span class="receivePresonInfo">
              <p>{{ sendAddress.name }}</p>
              <p>{{ sendAddress.phone }}</p>
            </span>
          </div>
        </div>
        <div class="subBtn">
          <el-button @click="submitOrderBtn">提交订单</el-button>
        </div>
      </div>
    </div>
    <!-- 新增收货地址 -->
    <el-dialog
      v-model="addAddressVisible"
      title="新增收货地址"
      width="30%"
      :before-close="addInfoHandleClose"
    >
      <div class="formC">
        <el-form
          ref="addInfoFormRef"
          :model="addInfoForm"
          :rules="addInfoRules"
          label-width="120px"
          class="demo-ruleForm"
          label-suffix=":"
          size="large"
        >
          <el-form-item label="收货人" prop="name">
            <el-input v-model="addInfoForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="所在地区" prop="region">
            <el-cascader
              v-model="addInfoForm.region"
              :options="options"
              clearable
              placeholder="选择地区"
              @change="handleChangeArea"
              style="width: 390px"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input
              v-model="addInfoForm.address"
              clearable
              placeholder="输入乡镇以下信息"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="addInfoForm.phone" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="saveReceiveAddress('addInfoFormRef')"
            >保存收货地址</el-button
          >
        </span>
      </template>
    </el-dialog>
    <footer-view></footer-view>
  </div>
</template>
<script>
import address from "@/utils/address";
import {
  receiveGoodsInfoList,
  saveReceiveGoodsInfo,
  saveOrderInfo,
} from "@/api/user";
export default {
  data() {
    return {
      sendType: "",
      orderId: "",
      options: address,
      addressList: [],
      addInfoForm: {
        name: "",
        region: "",
        address: "",
        phone: "",
      },
      addInfoRules: {
        name: [
          {
            required: true,
            message: "请正确填写收货人",
            trigger: "blur",
          },
        ],
        region: [
          {
            required: true,
            message: "请选择所在地",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
      },
      activeNames: 1,
      activeDiv: "1",
      huodao: false,
      zaixian: false,
      sendAddressShow: false,
      orderSubVisible: false,
      addAddressVisible: false,
      orderDetailList: [],
      payType: "",
      // 总价
      totleAmount: 0,
      // 支付金额
      paymentAmount: 0,
      sendAddress: {
        name: "",
        region: "",
        address: "",
        phone: "",
        defaultAddress: true,
        ischoseAddress: true,
      },
      // 运费
      freight: 20,
      // 减免金额
      reductionAmount: 0,
    };
  },
  setup() {},
  mounted() {
    this.init();
    this.queryReceiveGoodsInfo();
  },
  methods: {
    init() {
      this.addressList = this.$store.state.addressList;
      this.orderDetailList = JSON.parse(sessionStorage.getItem("choseList"));
      this.totleAmount = sessionStorage.getItem("totlePrice");
      this.computedReducePay();
      this.paymentAmount =
        parseInt(this.totleAmount) + this.freight - this.reductionAmount;
    },
    // 选中效果的实现
    huodaoBtn() {
      this.huodao = !this.huodao;
      this.zaixian = false;
      this.sendType = "货到付款";
    },
    zaixianBtn() {
      this.zaixian = !this.zaixian;
      this.huodao = false;
      this.sendType = "在线付款";
    },
    // 保留两位小数方法
    toFixedTwo(price) {
      return Math.floor(price * 100) / 100;
    },
    choseAddree(event) {
      let pos = this.addressList.indexOf(event);
      this.addressList.forEach((item) => {
        item.ischoseAddress = false;
      });
      this.addressList[pos].ischoseAddress = true;
      this.sendAddress = this.addressList[pos];
      this.sendAddressShow = true;
    },
    // 提交订单
    submitOrderBtn() {
      sessionStorage.setItem("addressInfo", JSON.stringify(this.sendAddress));
      if (this.sendAddress.name === "") {
        this.$message.error("选择收货信息");
        return false;
      }
      if (this.sendType === "") {
        this.$message.error("选择支付方式");
        return false;
      }
      let orderList = {
        receiveGoodsNo: "",
        paymentType: "",
        orderStatus: "",
        // 送货方式
        distributionType: "",
        totalAmount: 0,
        // 减免金额
        reductionAmount: 0,
        paymentAmount: 0,
        freight: 0,
        orderItemList: [],
      };
      // 构造我的订单
      orderList.receiveGoodsNo = this.sendAddress.serialNo;
      orderList.paymentType = this.sendType;
      orderList.orderStatus = "pendingPayment";
      orderList.distributionType = "极速快递";
      orderList.totalAmount = this.totleAmount;
      orderList.reductionAmount = this.reductionAmount;
      orderList.paymentAmount = this.paymentAmount;
      orderList.freight = this.freight;
      this.orderDetailList.forEach((item) => {
        let listItem = {
          skuNo: "",
          spuNo: "",
          quantity: 0,
          originalPrice: 0,
          discountType: "",
          discountValue: 0,
        };
        listItem.skuNo = item.skuNo;
        listItem.spuNo = item.spuNo;
        listItem.quantity = item.quantity;
        listItem.originalPrice = item.price;
        listItem.discountType = item.discountType;
        listItem.discountValue = item.discountValue;
        orderList.orderItemList.push(listItem);
      });
      console.log(orderList);
      saveOrderInfo(orderList).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.$message.success("已提交");
        }
      });
      sessionStorage.setItem("orderInfo", JSON.stringify(orderList));
      sessionStorage.setItem(
        "orderDetailList",
        JSON.stringify(this.orderDetailList)
      );
      this.$router.push("/payPage");
    },
    // 新增收货地址
    addAddressBtn() {
      this.addAddressVisible = !this.addAddressVisible;
    },
    saveReceiveAddress() {
      console.log(this.addInfoForm);
      let address = this.addInfoForm.region.toString();
      address = address.replace(/,/g, "");
      this.addInfoForm.region = address;
      this.addInfoForm.address = address + this.addInfoForm.address;
      saveReceiveGoodsInfo(this.addInfoForm).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.$message.success("添加成功");
          this.queryReceiveGoodsInfo();
          this.addVisible = false;
        }
      });
    },
    // 获取收货地址
    queryReceiveGoodsInfo() {
      receiveGoodsInfoList().then((res) => {
        console.log(res);
        this.addressList = res.page.list;
        this.addressNum = res.page.list.length;
      });
    },
    // 计算减免金额
    computedReducePay() {
      this.orderDetailList.forEach((item) => {
        console.log(item);
        if (item.discountType === "percentage") {
          debugger;
          this.reductionAmount = item.price * item.discountValue;
        } else if (item.discountType === "coupon") {
          this.reductionAmount = item.discountValue;
        }
        this.reductionAmount = this.toFixedTwo(this.reductionAmount);
      });
    },
  },
};
</script>

<style lang="scss">
.orderInfoMain {
  display: flex;
  justify-content: center;
  min-height: 600px;
  .orderInfoBox {
    width: 1000px;
    display: flex;
    flex-direction: column;
    .tableTit {
      font-size: 16px;
      color: #666;
      margin: 10px;
    }
    .boxTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      margin: 20px 0 40px 0;
      .steap {
        width: 500px;
        .el-steps .el-step__title {
          font-size: 14px;
        }
      }
    }
    .boxMain {
      border: 1px solid #f0f0f0;
      padding: 10px 20px;
      .reciveManInfo {
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 20px;
        .topBox {
          display: flex;
          justify-content: space-between;
          align-items: center;

          h3 {
            font-size: 14px;
          }
          .el-link {
            color: #244d4d;
            &:hover {
              font-weight: bold;
            }
          }
        }
        .addressList {
          display: flex;
          flex-direction: column;
          padding: 10px 20px;

          .list-box {
            color: #666;
            font-size: 14px;
            display: flex;
            align-items: center;
            margin: 5px 0;
            .namePron {
              position: relative;
              border: 1px solid #ccc;
              width: 144px;
              display: flex;
              justify-content: center;
              align-items: center;
              height: 30px;
              &:hover {
                border: 2px solid #244d4d;
                transition: 0s;
                cursor: pointer;
              }
              &:visited {
                border: 2px solid #67c23a;
              }
              .duigou3 {
                position: absolute;
                bottom: -3px;
                right: 3px;
                color: #67c23a;
                font-size: 15px;
                font-weight: bold;
              }
            }
            .rightText {
              display: flex;
              .contactName {
                display: flex;
                justify-content: center;
                width: 80px;
              }
              .phone {
                display: flex;
                justify-content: center;
                width: 140px;
              }
            }
          }
        }
      }
      .payType {
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 20px;
        .topH {
          font-size: 14px;
          margin-top: 10px;
        }
        .payTypeList {
          display: flex;
          font-size: 14px;
          color: #666;
          padding: 10px 20px;
          span {
            display: flex;
            position: relative;
            align-items: center;
            justify-content: center;
            border: 1px solid #ddd;
            margin: 0 5px;
            height: 30px;
            overflow: hidden;
            width: 100px;
            &:hover {
              border: 2px solid #244d4d;
              transition: 0s;
              cursor: pointer;
            }
            .duigou {
              position: absolute;
              bottom: -3px;
              right: 1px;
              color: #67c23a;
              font-size: 15px;
              font-weight: bold;
            }
          }
        }
      }
      .orderInfo {
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 20px;
        .top {
          font-size: 14px;
          margin: 10px 0;
        }
        .orderInfoMainBox {
          margin: 20px 0;
          min-height: 200px;
          display: flex;
          .orderBoxLeft {
            padding: 10px 20px;
            display: flex;
            width: 360px;
            flex-direction: column;
            background-color: #f7f7f7;
            h3 {
              color: #666;
              font-size: 14px;
            }
            .senTypeList {
              margin-top: 10px;
              display: flex;
              color: #666;
              font-size: 12px;
              span {
                position: relative;
                height: 30px;
                width: 145px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #ddd;
                margin: 0 10px;
                &:hover {
                  border: 2px solid #244d4d;
                  background-color: #fff;
                  cursor: pointer;
                }
                .duigou2 {
                  position: absolute;
                  bottom: -3px;
                  right: 3px;
                  color: #67c23a;
                  font-size: 15px;
                  font-weight: bold;
                }
              }
            }
            .sendTime {
              border-bottom: 1px solid #ddd;
              margin-top: 10px;
              display: flex;
              color: #666;
              padding: 10px 10px;
              font-size: 12px;
              .week {
                color: red;
              }
            }
            .getBySelf {
              display: flex;
              flex-direction: column;
              color: #666;
              font-size: 12px;
              .getAddress {
                display: flex;
                border-bottom: 1px solid #ddd;
                margin: 10px;
              }
              .getTime {
                display: flex;
                margin: 10px;
                border-bottom: 1px solid #ddd;
              }
            }
          }
          .orderBoxRight {
            padding: 10px 20px;
            color: #666;
            font-size: 14px;
            display: flex;
            flex-direction: column;
            background-color: #f3fbfe;
            .shopName {
              font-size: 14px;
            }
            .goodsBox {
              display: flex;
              font-size: 12px;
              margin-top: 20px;
              .imgbox {
                height: 80px;
                width: 80px;
                background-color: #fff;
                img {
                  height: 100%;
                  width: 100%;
                  border: 1px solid #ddd;
                }
              }
              .intrduce {
                margin: 0 10px;
                display: flex;
                flex-direction: column;
                width: 240px;
                .type {
                  display: flex;
                  margin: 8px 0;
                }
                .extra {
                  color: #6679b3;
                }
              }
              .price {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 20px;
              }
              .num {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 20px;
              }
              .isHaveNum {
                width: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 20px;
              }
            }
          }
        }
      }
      .discountBox {
        .card {
          padding: 20px;
          .itemList {
            margin: 10px 0;
            .discountBox {
              span {
                font-size: 16px;
                color: #244d4d;
                font-weight: 700;
              }
              .el-tag {
                height: 40px;
                span {
                  color: #666;
                }
              }
            }
          }
        }
      }
    }
    .priceNum {
      padding: 10px 20px;
      display: flex;
      flex-direction: column;
      width: 1000px;
      .priceTotle {
        display: flex;
        justify-content: flex-end;
        margin: 8px 0;
        color: #666;
        font-size: 13px;
        .right {
          width: 150px;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
    .footerPart {
      width: 1000px;
      display: flex;
      flex-direction: column;
      background-color: #f4f4f4;
      color: #666;
      font-size: 14px;
      padding: 10px 20px;
      justify-content: center;
      min-height: 80px;
      .totalPrice {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .PriceTo {
          width: 120px;
          display: flex;
          justify-content: flex-end;
          font-size: 18px;
          color: #244d4d;
          font-weight: bold;
        }
      }
      .senAddressBox {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #999;
        font-size: 12px;
        margin: 5px 0;
        .sendAddressSpan {
          margin-right: 10px;
        }
        .receivePresonInfo {
          display: flex;
          align-items: center;
          p {
            margin: 0 5px;
          }
        }
      }
    }
    .subBtn {
      width: 1000px;
      display: flex;
      justify-content: flex-end;
      margin: 10px 0 30px 0;
      .el-button {
        font-size: 18px;
        font-weight: bold;
        width: 135px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        background-color: #244d4d;
        color: #fff;
        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }
}
</style>
